<style>
        .out{
            background-color: #fff;
            border: 1px solid #888;
            width:99%;
            color:#444;
        }
    </style>
    <div class='title'>颜色选择器</div>
    
    <div class="sub">
        <div class='text'>颜色选择器：j-color [size,disabled]
                备注：alpha 为是否启用透明度<br>
                请看一个例子：
            <div class="out" style='padding-left:50px;'>
                <div class='j-color xs' jui-bind='color' alpha></div>
                <div class='j-color s' jui-bind='color2'></div>
                <div class='j-color m' jui-bind='color2'></div>
                <div class='j-color l' jui-bind='color2'></div>
                <div class='j-color xl' jui-bind='color2'></div>
                <div class='j-color' disabled jui-bind='color2'></div>
                <span jstyle="color:{{$.color}}">颜色1</span>
                <span jstyle="color:{{$.color2}}">颜色2</span>
            </div>
            <div class='j-code' disabled width='99%' height='auto'>
    
&lt;div class='j-color xs' jui-bind='color' alpha>&lt;/div>
&lt;div class='j-color s' jui-bind='color2'>&lt;/div>
&lt;div class='j-color m' jui-bind='color2'>&lt;/div>
&lt;div class='j-color l' jui-bind='color2'>&lt;/div>
&lt;div class='j-color xl' jui-bind='color2'>&lt;/div>
&lt;div class='j-color' disabled jui-bind='color2'>&lt;/div>
&lt;span jstyle="color:{{$.color}}">颜色1&lt;/span>
&lt;span jstyle="color:{{$.color2}}">颜色2&lt;/span>
&lt;script>
new Jet({
    data:{
        color:'rgba(231,22,32,1)',
        color2:'rgb(231,22,32)',
    }
});
&lt;/script>
            </div>
        </div>
    
    <script>
        new Jet({
            data:{
                color:'rgba(231,22,32,1)',
                color2:'rgb(231,22,32)',
            }
        });
    </script>